<template>
  <div>
    <h3>自定义指令</h3>
    <!-- <input ref="inp" type="text" v-focus v-model="msg" v-if="isShow" /> -->

    <!-- <h2 v-color="color">我是一个标签</h2> -->

    <!-- <button @click="color = 'red'">修改字体颜色</button> -->

    <h2>{{ msg }}</h2>
    <button v-copy="msg">我是一键复制用按钮</button>

    <br />
    <h4>复制后用的</h4>
    <input type="text" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '123',
      isShow: true,
      color: '#087',
    }
  },
  //局部注册自定义指令
  directives: {
    //指令也是一个对象，使用的时候要在前面加上v-
    // focus: {
    //   inserted(el) {
    //     console.dir(el)
    //     el.focus()
    //   },
    // },

    color: {
      //当被绑定的元素插入到父节点中时
      inserted(el, binding) {
        // console.log(el)
        // console.log(binding)
        el.style.color = binding.value
      },

      //元素更新时
      update(el, binding) {
        // console.log(el)
        // console.log(binding)
        el.style.color = binding.value
      },
      //组件全部更新完时
      componentUpdated(el, binding) {
        el.style.color = binding.value
      },
    },
  },
}
</script>
